<template>
  <div class="decorate-pointExchange"
  :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
    <section class="point-goods">
      <ul>
        <li class="point-goods-li" v-for="(goods,index) in tplItemData.goodslist" :key="index">
          <a href="javascript:;" @click="openLink(goods.link)">
            <div class="goodsimg">
              <img
                :src="goods.is_compress == 1 ?`${goods.pic}480x480`:goods.pic"
                alt
              />
            </div>
            <section class="goods-info">
              <p  :class="['title','title'+tplItemData.goodstyle,tplItemData.titleLine==1?'multiLine':'']" 
                  v-if="tplItemData.showName == 1 ||tplItemData.showName==true">
                  {{goods.title}}
              </p>
              <p class="points-info" :style="'color:'+tplItemData.titleColor">兑换{{goods.point_name}}：<em>{{goods.points}}</em></p>
              <van-button class="points-btn" hairline round type="info" color="#F21228">立即兑换</van-button>
            </section>
          </a>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
  import { openPage } from '@/utils/utils'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    components: {
    },
    props: {
      tplItemData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    methods: {
      openLink(link){
        openPage(link)
      }
    },
    created() {
      // // console.log(this.tplItemData)
    }
  })
</script>

<style lang="scss">
@import "src/styles/mixin";
.point-goods{
  ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .point-goods-li{
      width: calc((100% - 20px)/ 2);
      margin-bottom: 20px;
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      a{
        display: block;
        // 图片样式
        .goodsimg{
          position: relative;
          padding-top: 100%;
          overflow: hidden;
          img{
            position: absolute;
            top: 0;
            width: 100%;
          } 
        }
        .goods-info{
          padding: 20px;
        }
        .title{
          @include lineClamp(26px,38px,1);
          &.multiLine{
            @include lineClamp(26px,38px,2);
          }
        }
        .points-info{
          font-size: 22px;
          margin-top: 10px;
          em{
            display:inline;
            font-size: 28px;
          }
        }
        .points-btn{
          font-size: 22px;
          width:150px;
          height:50px;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
